<template>
    <div class="board">
        <div class="title">Tig Platform Ranking Board</div>
        <div class="subtitle">{{subtitle}}</div>
        <div class="table w-full">
            <div class="flex tr w-full overflow-hidden" v-for="(row,index) in list">
                <div class="no">{{index+1}}</div>
                <div class="item-1 flex-1 break-words overflow-hidden" :class="{ more: showMoreInfo }">{{row[0]}}</div>
                <div class="item-2">{{row[1]}}</div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "TigRankBoard", props: {
            subtitle: String, list: {type: Array, require: true}, showMoreInfo: {type: Boolean, default: false}
        }
    }
</script>

<style scoped>
    @font-face {
        font-family: 'MF-FangHei';
        src: url("../../fonts/black.ttf");
    }

    @font-face {
        font-family: 'Gotham-Bold';
        src: url("../../fonts/Gotham-Bold.otf");
    }

    .board {
        position: relative;
        width: 1200px;
        height: 830px;
        background: url("../../images/rank.png") no-repeat;
        background-size: contain;
        font-family: Gotham-Bold, MF-FangHei, sans-serif;
        color: rgb(59, 67, 77);
        text-transform: uppercase;
    }

    .title {
        position: absolute;
        top: 25px;
        left: 50px;
        overflow: hidden;
        font-size: 45px;

    }

    .subtitle {
        position: absolute;
        top: 85px;
        left: 50px;
        overflow: hidden;
        font-size: 25px;
    }

    .table {
        position: absolute;
        top: 155px;
    }

    .tr {
        height: 132px;
        line-height: 132px;
        font-size: 50px;
    }
    .tr:nth-child(1){
        color: rgb(222,166,54);
    }
    .tr:nth-child(2){
        color: rgb(181,181,181);
    }
    .tr:nth-child(3){
        color: rgb(178,137,115);
    }
    .item-1 {
        word-break: break-all;

    }

    .item-1.more {
        font-size: 35px;
        line-height: 66px;
    }

    .item-2, .no {
        padding-left: 50px;
        padding-right: 50px;
        min-width: 150px;
        text-align: center;
    }

</style>